<template>
    <div class="listLeft">
        <div class="txt" :class="item.id==activeId?'active':''" @click="clickInfo(item.id)" v-for="item in listName" :key="item.id">{{item.classname}}</div>
    </div>
</template>

<script>
export default {
    name:'listLeft',
    data() {
        return {
           listName:[], 
           activeId:47,//默认选中"全部"高亮
        }
    },
    mounted(){
        this.getListName();
    },
    methods:{
        async getListName(){
            const result =await this.$api.listName();
            // console.log(result.data);
            if(result.status==200){
                this.listName=result.data
            }
        },
        // 高亮显示-菜单点击事件
        clickInfo(id){ //ID：当前点击的ids
            this.activeId=id 

            // 把当前点击的id，向父组件传递过去 这里使用的是自定义事件实现子向父组件通信
            this.$emit('itemId',id)
            
        }
    }
}
</script>

<style lang="less">
.listLeft{
    flex: 1;//占一份
    background-color: #F8F8F8;
    // 减去头部和底部
    height: calc(100vh - 2rem);
    // margin-top: .2rem;
    .txt{
        line-height: .8rem;
        padding-left: .25rem;
        border-bottom: 1px solid #e7e7e7;
        font-size: 0.25rem;
        position: relative;
    }
    .active{
        background-color: white;
        color: #31c27c;
        &::before{
			content: '';
			display: block;
			width: 3px;
			height: 30px;
			background-color: #31c27c;
			position: absolute;
			top: 25%;
			left: 0px;
		}
    }
}
</style>